<template>
	<view class="edit">
		<view class="title">
			<input type="text" placeholder="请输入标题" class="my-input" v-model="artObj.title"/>
		</view>
		<view class="content">
			<editor placeholder="写点什么吧" show-img-size show-img-toolbar show-img-resize @ready="onEditReady"
				@focus="onFocus" class="myEdit" @statuschange="onStatusChange"></editor>
		</view>
		<view class="submit">
			<u-button type="primary" text="确认发布" :disabled="!artObj.title.length" @click="onSubmit"></u-button>
		</view>

		<view class="tool-box" v-if="toolShow">
			<view class="item">
				<image src="/static/h_h.png" class="item-pic" @click="Head"></image>
			</view>
			<view class="item">
				<image src="/static/text-bold.png" class="item-pic" @click="bold"></image>
			</view>
			<view class="item">
				<image src="/static/text-italic.png" class="item-pic" @click="italic"></image>
			</view>
			<view class="item">
				<image src="/static/text-underline.png" class="item-pic" @click="Divider"></image>
			</view>
			<view class="item">
				<image src="/static/screenshot-two.png" class="item-pic" @click="inserPic"></image>
			</view>
			<view class="item">
				<image src="/static/check.png" class="item-pic" @click="finish"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {getImgSrc} from "@/utils/tools.js"
	const db = uniCloud.database()
	export default {
		data() {
			return {
				toolPicList: [
					"/static/h_h.png",
					"/static/text.png",
					"/static/text-bold.png",
					"/static/text-italic.png",
					"/static/screenshot-two.png",
					"/static/check.png"
				],

				toolShow: false,
				editorCTX: {},
				"artObj":{
					"title":"",
					"content":"",
					"description":"",
					"picurls":""
				}
			};
		},
		methods: {
			onEditReady() {
				uni.createSelectorQuery().in(this).select('.myEdit').fields({
					size: true,
					context: true,

				}, res => {
					console.log(res)
					this.editorCTX = res.context
				}).exec()
			},
			onFocus() {
				this.toolShow = true
			},
			Head() {
				this.editorCTX.format("header", "h1")
			},
			bold() {
				this.editorCTX.format("bold")
			},
			italic() {
				this.editorCTX.format("italic")
			},

			Divider() {
				this.editorCTX.insertDivider();
			},
			inserPic() {
				uni.chooseImage({
					success: async (res) => {
						console.log(res)
						uni.showLoading({
							title:"上传中 请稍后",
							mask:true
						})
						for (let item of res.tempFiles) {
							let res = await uniCloud.uploadFile({
								filePath: item.path,
								cloudPath: "selfUpload" + Date.now() + ".jpg"
							})
							console.log(res)
							this.editorCTX.insertImage({
								src: res.fileID
							})
							
						}
						uni.hideLoading()
					}
				})
			},
			finish() {
				this.toolShow = false
			},
			//当样式发生改变时
			onStatusChange(e) {
				//console.log(e)
				let detail = e.detail
				console.log(detail)
			},
			onSubmit(){
				this.editorCTX.getContents({
					success:(res)=>{
						
						this.artObj.description = res.text.slice(0,50)
						this.artObj.content = res.html
						this.artObj.picurls = getImgSrc(res.html,3)
					}
				})
				console.log(this.artObj)
				uni.showLoading({
					title:"发布中..."
				})
				setTimeout(()=>{
					this.addData()
				},100)
				
			},
			addData(){
				db.collection("quanzi_article").add({
					...this.artObj
				}).then(res=>{
					console.log(res)
					uni.hideLoading()
					uni.showToast({
						title:"发布成功",
						icon:"success"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/index/index"
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.edit {
		padding: 10rpx 30rpx 0 30rpx;

		.title {

			.my-input {
				height: 120rpx;
				font-size: 46rpx;
				border-bottom: 1rpx solid #e4e4e4;
				margin-bottom: 30rpx;
			}
		}

		.content {
			.myEdit {
				height: calc(100vh - 400rpx);
				margin-bottom: 30rpx;
			}

		}

		.tool-box {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 80rpx;

			position: fixed;
			bottom: 0;
			left: 0;

			.item {
				.item-pic {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>
